<!--
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<section class="issue-identity">
  <header class="modal-header">
    <h1>Issue New Identity</h1>
    <button class="icon modal-exit" (click)="activeModal.dismiss()">
      <svg class="ibm-icon" aria-hidden="true">
       <use xlink:href="#icon-close_new"></use>
      </svg>
    </button>
  </header>
  <section class="modal-body">
    <p>Issue a new ID to a participant in your business network</p>

    <ng-template #participantTypeaheadResult let-r="result" let-t="term">
      <span class="participant-id">{{getParticipant(r).getIdentifier()}}</span> <span class="participant-type">{{getParticipant(r).getType()}}</span>
    </ng-template>

    <form #issueIdentityForm="ngForm" id="issue-identity-form" (ngSubmit)="issueIdentity()">

      <div class="justified-input">
        <label class="required" for="userID">ID Name<abbr title="required">*</abbr></label>
        <input required type="text" [(ngModel)]="userID" id="userID" name="userID" autocomplete="off">
      </div>

      <div class="keyValue">
        <label class="key" for="participantFQI">Participant<abbr title="required">*</abbr></label>
        <div class="value">
            <input [ngClass]="{'error-underline': !isParticipant}" required type="text" [(ngModel)]="participantFQI" id="participantFQI" name="participantFQI" [ngbTypeahead]="search" [resultTemplate]="participantTypeaheadResult" autocomplete="off" (ngModelChange)="isValidParticipant()">
            <div *ngIf="!isParticipant" class="error-message" style="position: absolute; top: 165px;">
                {{ noMatchingParticipant }}
            </div>
        </div>
      </div>

      <div>
        <input type="checkbox" [(ngModel)]="issuer" id="issuer" name="issuer">
        <label class="checkbox-label" for="issuer">Allow this ID to issue new IDs (
          <svg class="standard-icon" aria-hidden="true">
            <use xlink:href="#icon-relationship_16"></use>
          </svg>
          )
        </label>
      </div>
    </form>

    <p>Issuing an identity generates a one-time secret. You can choose to send this to somebody or use it yourself when it has been issued.</p>
  </section>
  <footer>
    <button type="button" class="secondary" (click)="activeModal.dismiss();">
      <span>Cancel</span>
    </button>
    <button id="createNew" type="submit" form="issue-identity-form" class="primary" [disabled]="!issueIdentityForm.form.valid || issueInProgress || !isParticipant">
      <div *ngIf="!issueInProgress">
        <span>Create New</span>
      </div>
      <div *ngIf="issueInProgress" class="ibm-spinner-indeterminate small loop">
        <div class="loader">
          <svg class="circular" viewBox="25 25 50 50">
            <circle class="circle-path" cx="50" cy="50" r="20"/>
          </svg>
        </div>
      </div>
    </button>
  </footer>
</section>
